<template>
  <div class="bm-page-view">
    <dv-border-box-8>
      <div class="box">
        <div class="df-ac-jcsb">
          <div class="box-title">考勤数据分析</div>
          <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;left:-0.5rem;" />
        </div>
        <div ref="echart" class="box-echart"></div>
      </div>
    </dv-border-box-8>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'BottomMid',
  data () {
    return {
      index: 0,
      timer: null,
      date: null,
      data: null
    }
  },
  props: {
    dataProp: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    dataProp (newV, oldV) {
      this.getData(newV)
    },
    deep: true
  },
  mounted () {
    // 鼠标移入暂停滚动
    document.querySelector('.bm-page-view .box').addEventListener('mouseover', (e) => {
      this.stop()
    })
    // 鼠标移出开始滚动
    document.querySelector('.bm-page-view .box').addEventListener('mouseout', (e) => {
      this.initChart()
    })
  },
  methods: {
    stop () {
      clearInterval(this.timer)
    },
    getData (res) {
      this.date = this.formatArray(res.date, 15)
      this.data = this.formatData(res.data)
      this.initChart()
    },
    formatData (data) {
      for (let i = 0, len = data.length; i < len; i++) {
        data[i].data = this.formatArray(data[i].data, 15)
      }
      const arr = []
      for (let i = 0, len = data.length; i < len; i++) {
        const temp = []
        for (let j = 0, len = data.length; j < len; j++) {
          temp.push({
            name: data[j].name,
            type: 'line',
            smooth: true,
            // stack: '总量',
            data: data[j].data[i]
          })
        }
        arr.push(temp)
      }
      return arr
    },

    // 一维数组转二维数组
    formatArray (arr, n) {
      if (!Array.isArray(arr) || arr.length === 0) {
        return []
      }
      var tem = []
      var size = arr.length
      var count = Math.floor((size - 1) / n) + 1

      while (count--) {
        tem.unshift(arr.slice(count * n, (count + 1) * n))
      }
      return tem
    },
    initChart () {
      const that = this
      this.timer = setInterval(async () => {
        if (this.index === 1) {
          this.index = 0
        } else {
          this.index++
        }
        const dateArr = that.date[that.index]
        const data = that.data[that.index]
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['公司人数', '迟到人数', '请假人数', '应出勤人数', '出差人数', '出勤人数', '休息人数'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            data: dateArr,
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff' // 刻度线标签颜色
            }
          },
          series: data
        }
        var myChart = echarts.init(this.$refs.echart)
        myChart.clear()
        myChart.setOption(option)
      }, 2500)
    }
  }

}
</script>

<style lang="scss" scoped>
.bm-page-view {
  padding: 0.25rem;
  height: 5.65rem;
  .box {
    position: relative;
    height: 100%;
    .box-title {
      color: #1bb4f9;
      font-size: 0.225rem;
      padding: 0.25rem 0 0.2rem 0.625rem;
    }
    .box-echart {
      width: 90%;
      height: 3rem;
      margin: 0 auto;
    }
  }
}

</style>
